<template>
  <div v-show="show">
    <div class="seller">
      <div class="top">
        <p class="title">月度分析</p>

        <div class="btn">
          <span class="item" :class="showTable ? 'active' : ''" @click="showTable = true">表格</span>
          <span class="item" :class="!showTable ? 'active' : ''" @click="showTable = false">图表</span>
        </div>

      </div>
      <el-table
        v-show="showTable"
        :data="tableData"
        stripe
        style="width: 100% ">
        <el-table-column
        v-for="(item, index) in headerArr"
        :key="index"
        :label="item"
        >
          <template slot-scope="scope">
            <div>
                <span>
                  {{scope.row[index]}}
                </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!showTable" id="monthChart" style="height: 300px;width: 1150px"></div>
    </div>
  </div>
</template>

<script>
  import {getData} from '@/api/automation/customs'
    export default {
        name: "seller",
        props:['info'],
        data() {
            return {
                tableData:[],
                showTable:true,
                legend:[],
                sumQuantity:[],
                sumValue:[],
                data:{
                    "basename":"",
                    "reportColumns": "[month],hs_code,Shipper_name,Consignee_name,country,CUSTOMS,MODE_OF_TRANSPORT",
                    "chartpms": 3,
                    "where":"",
                    "pageSize": 80,
                    "cols":"",
                    "col":"",
                    "types": "date",
                    "chartInt": 0,
                    "crowInt": 0
                },
                show:false,
                headerArr:[]
            }
        },
        methods: {
            init() {
                this.data.basename = this.info.c;
                this.data.where = this.info.w;
                this.data.cols = this.info.cls;
                this.data.col = this.info.cl;

                getData(this.data).then(res => {
                    if(res.data.data.list) {
                        this.show = true
                        this.tableData = res.data.data.list
                        this.headerArr = res.data.data.title
                        //折线图处理数据 - 年- 月
                        let title = [];

                        // x轴处理
                        let legend = []
                        this.tableData.forEach(value => {
                            legend.push(value[0] + '-' + value[1])
                        })

                        this.headerArr.map((item,index)=>{
                            if(item!='年'&&item!='月'){
                                title.push({
                                    title:item,
                                    index:index
                                })
                            }
                        })
                        let end={};
                        title.map(itemGrade=>{
                            let arr=[], name = itemGrade.title;
                            this.tableData.map((item)=>{
                                arr.push(item[itemGrade.index])
                            })
                            end[name]=arr;
                        })
                        this.drawLine(end, legend)
                    }
                })
            },
            drawLine(obj, legend) {
                let arr=[];
                let xData = []
                Object.keys(obj).map((key)=>{
                    arr.push({
                        name:key,
                        type:'line',
                        stack: key,
                        data:obj[key]
                    })
                    xData.push(key)
                })
                console.log(arr)
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('monthChart'))
                // 绘制图表
                let options = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:xData
                    },
                    grid: {
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: legend
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: arr
                };
                myChart.setOption(options)

            }
        }
    }
</script>

<style scoped lang="scss">
  .seller{
    font-size: 13px;
    padding: 15px 25px;
    background-color: white;
    margin-bottom: 20px;
    border-radius: 20px;
  }
  .title{
    color: #2A97F9;
    font-size: 14px;
    font-weight: 600;
  }
  .top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 14px;
  }
  .item{
    width: 80px;
    height: 25px;
    display: inline-block;
    color: #2A97F9;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
  }
  .btn{
    border: 2px solid #2A97F9;
    border-radius: 10px;
    overflow: hidden;
  }
  .active{
    background-color: #2A97F9;
    color: white;
  }
</style>
